<template>
  <div class="login">
    <!-- 1.0 关闭图标 -->
    <span class="close-btn">
      <i class="iconicon-test iconfont"></i>
    </span>
    <h2 class="login-t1">
      <span>注册</span>
    </h2>
      <Myinput 
      v-model="user.username" 
      type='text'
      placeholder="用户名/手机号码"
      :rules="rules.username"
      msg="手机号码不合法"
      ></Myinput>
       <Myinput 
      v-model="user.nickname" 
      placeholder="昵称"
      type='text'
       :rules="rules.nickname"
      ></Myinput>
      <Myinput 
      v-model="user.password" 
      placeholder="密码"
      type='password'
       :rules="rules.password"
      ></Myinput>
     
      <div class="tips">
          已有账号？ 去 <router-link to="/login">登陆</router-link> 
      </div>
      <MyButton type="primary" 
      @click="registerFn"
      >
        <i class="iconshoucang iconfont"></i> 注册
        
       
        </MyButton>
  </div>
</template>

<script>
import MyButton from '../components/MyButton.vue'
import Myinput from '../components/Myinput.vue'
import {userRegiterAPI} from '../apis/user'
export default {
  data () {
    return {
    user:{
      username:'',
      nickname:"",
      password:'',
    },
    rules:{
      username:/^1\d{6,10}$/,
      nickname:/^.{2,9}$/,
      password:/^[a-zA-Z0-9~!@#$^%&*()_+=]{3,18}$/,
    }
    }
  },
  components: {
    MyButton,
    Myinput
  },
  methods:{
      registerFn() {
          if(
              this.rules.username.test(this.user.username)&&
              this.rules.password.test(this.user.password)&&
              this.rules.nickname.test(this.user.nickname)
          ) {
              userRegiterAPI(this.user).then(res =>{
                  console.log(res);
                  const {message} = res.data;
                  if(message === '注册成功'){
                    this.$toast.success('注册成功')
                    this.$router.push({path:'/login'})
                  } else{
                    this.$toast.fail(message);
                  }
              })
          } else{
              this.$toast('输入数据有误')
          }
      }
  }
}
</script>

<style lang="less" scoped>
.login{
   background: url('../assets/tkbj.jpg') no-repeat center;
}
  .conse-btn{
    position: fixed;
    left: 20px;
    top: 20px;
    .iconfont{
      font-size: 30px;
    }
  }

  .tips{
    padding: 0 30px;
    text-align: right;
  }
  .iconshoucang{
    margin-right: 10px;
  }
  .login-t1{
    display: flex;
    justify-content: center;
    padding: 40px 0 20px;
    span{
    display: inline-block;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    padding: 30px 60px;
    border-radius: 0 50px 0 50px;
    background: #2e5aa6;
    margin-top: 6px;
    }
  }
</style>